
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="style/favicon.ico"/>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<link href="style/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/gatling.js"></script>
<script type="text/javascript" src="js/moment.min.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript" src="js/all_sessions.js"></script>
<script type="text/javascript" src="js/stats.js"></script>
<script type="text/javascript" src="js/highstock.js"></script>
<script type="text/javascript" src="js/highcharts-more.js"></script>
<script type="text/javascript" src="js/theme.js"></script>
<script type="text/javascript" src="js/unpack.js"></script>
<title>Gatling Stats - Global Information</title>
</head>
<body>
<div class="frise"></div>
<div class="container details">
    <div class="head">
        <a href="http://gatling.io" target="blank_" title="Gatling Home Page"><img alt="Gatling" src="style/logo.png"/></a>
    </div>
    <div class="main">
        <div class="cadre">
                <div class="onglet">
                    <img src="style/cible.png" />
                    <p><span>apigatlingsimulationtest</span></p>
                </div>
                <div class="content">
                    <div class="sous-menu">
                        <div class="item ouvert"><a href="index.html">GLOBAL</a></div>
                        <div class="item "><a id="details_link" href="#">DETAILS</a></div>
                        <script type="text/javascript">
                          var timestamp = 1517574849832;
                          var runStartHumanDate = moment(timestamp).format("YYYY-MM-DD HH:mm:ss Z");
                          document.writeln("<p class='sim_desc' title='"+ runStartHumanDate +", duration : 20 seconds' data-content='null'>");
                          document.writeln("<b>" + runStartHumanDate + ", duration : 20 seconds null</b>");
                          document.writeln("</p>");
                        </script>
                    </div>
                    <div class="content-in">
                        <h1><span>> </span>Global Information</h1>
                        <div class="article">
                            
            <div class="schema polar">
              <div id="container_number_of_requests"></div>
            </div>

            <div class="schema demi">
              <div id="container_indicators" class="demi"></div>
            </div>

                        <div class="statistics extensible-geant collapsed">
                            <div class="title">
                                <div class="right">
                                    <span class="expand-all-button">Expand all groups</span> | <span class="collapse-all-button">Collapse all groups</span>
                                </div>
                                <div id="statistics_title" class="title_collapsed">STATISTICS <span>(Click here to show more)</span></div>
                            </div>
                            <table id="container_statistics_head" class="statistics-in extensible-geant">
                                <thead>
                                    <tr>
                                        <th rowspan="2" id="col-1" class="header sortable sorted-up"><span>Requests</span></th>
                                        <th colspan="5" class="header"><span class="executions">Executions</span></th>
                                        <th colspan="8" class="header"><span class="response-time">Response Time (ms)</span></th>
                                    </tr>
                                    <tr>
                                        <th id="col-2" class="header sortable"><span>Total</span></th>
                                        <th id="col-3" class="header sortable"><span>OK</span></th>
                                        <th id="col-4" class="header sortable"><span>KO</span></th>
                                        <th id="col-5" class="header sortable"><span>% KO</span></th>
                                        <th id="col-6" class="header sortable"><span>Req/s</span></th>
                                        <th id="col-7" class="header sortable"><span>Min</span></th>
<th id="col-8" class="header sortable"><span>50th pct</span></th>
<th id="col-9" class="header sortable"><span>75th pct</span></th>
<th id="col-10" class="header sortable"><span>95th pct</span></th>
<th id="col-11" class="header sortable"><span>99th pct</span></th>
<th id="col-12" class="header sortable"><span>Max</span></th>
<th id="col-13" class="header sortable"><span>Mean</span></th>
<th id="col-14" class="header sortable"><span>Std Dev</span></th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                            <div class="scrollable">
                                <table id="container_statistics_body" class="statistics-in extensible-geant">
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>

            <div class="schema geant">
              <a name="active_users"></a>
              <div id="container_active_users" class="geant"></div>
            </div>

            <div class="schema geant">
              <div id="container_distrib" class="geant"></div>
            </div>

            <div class="schema geant">
              <div id="container" class="geant"></div>
            </div>

            <div class="schema geant">
              <a name="requests"></a>
                <div id="container_requests" class="geant"></div>
            </div>

            <div class="schema geant">
              <a name="responses"></a>
                <div id="container_responses" class="geant"></div>
            </div>

                        </div>
                    </div>
                </div>
        </div>
    </div>
    <div class="nav">
        <ul></ul>
    </div>
</div>
<div class="foot">
    <a href="http://gatling.io" title="Gatling Home Page"><img alt="Gatling" src="style/logo-gatling.jpg"/></a>
</div>
<script type="text/javascript">
    var pageStats = stats.stats;
    $(document).ready(function() {
        $('.sim_desc').popover({trigger:'hover', placement:'bottom'});
        setDetailsLinkUrl();
        setGlobalMenu();
        setActiveMenu();
        fillStats(pageStats);
        
function numberOfRequestsDataForGroup(group) {
  var data = {names: [], oks: [], kos: []};

  $.each(group.contents, function(contentName, content) {
    if (content.type == 'GROUP') {
      var result = numberOfRequestsDataForGroup(content);
      data.names = data.names.concat(result.names);
      data.oks = data.oks.concat(result.oks);
      data.kos = data.kos.concat(result.kos);
    }
    else if (content.type == 'REQUEST') {
      data.names.push(content.path);
      data.oks.push(parseInt(content.stats.numberOfRequests.ok));
      data.kos.push(parseInt(content.stats.numberOfRequests.ko));
    }
  });

  return data;
}

var numberOfRequestsData = numberOfRequestsDataForGroup(stats);

new Highcharts.Chart({
  chart: {
    renderTo:'container_number_of_requests',
    polar:true,
    type:'column',
    height:330
  },
  credits:{
    enabled:false
  },
  title:{
    text:'<span class="chart_title">Number of requests</span>',
    useHTML: true
  },
  xAxis:{
    tickmarkPlacement:'on',
    tickInterval: 1,
    categories:numberOfRequestsData.names,
    labels:{ enabled:false }
  },
  yAxis:{
    min:0
  },
  plotOptions:{
    series:{
      stacking:'normal',
      groupPadding:0,
      pointPlacement:'on',
      shadow: true
    }
  },
  legend: {
    	borderWidth: 0.5,
      borderRadius: 3,
      borderColor: 'black',
      itemStyle: { fontWeight: "normal" }
  },
  series:[
    {
      name:'KO',
      data:numberOfRequestsData.kos,
      color:"#FF0000"
    },
    {
      name:'OK',
      data:numberOfRequestsData.oks,
      color:"#4572A7"
    }
  ]
});

Highcharts.setOptions({
  global: { useUTC: false }
});

var indicatorsChart = new Highcharts.Chart({
  chart: {
    renderTo: 'container_indicators',
    marginRight: 150
  },
  credits: { enabled: false },
  legend: { enabled: false },
  title: { text: 'A title to let highcharts reserve the place for the title set later' },
  xAxis: {
    categories: [
      pageStats.group1.name,
      pageStats.group2.name,
      pageStats.group3.name,
      pageStats.group4.name
    ]
  },
  yAxis: {
    title: { text: 'Number of Requests' }
  },
  tooltip: {
    formatter: function() {
      var s;
      if (this.point.name) { // the pie chart
        s = ''+ this.point.name +': '+ this.y +'% requests';
      } else {
        s = ''+ this.y + ' requests';
      }
      return s;
    }
  },
  plotOptions: {
    series: {
      stacking: 'normal',
      shadow: true
    }
  },
  series: [
    {
      type: 'column',
      color: '#A0B228',
      data: [pageStats.group1.count,0,0,0],
      tooltip: { yDecimals: 0, ySuffix: 'ms' }
    },
    {
      type: 'column',
      color: '#FFDD00',
      data: [0,pageStats.group2.count,0,0],
      tooltip: { yDecimals: 0, ySuffix: 'ms' }
    },
    {
      type: 'column',
      color: '#FF9D00',
      data: [0,0,pageStats.group3.count,0],
      tooltip: { yDecimals: 0, ySuffix: 'ms' }
    },
    {
      type: 'column',
      color: '#FF0000',
      data: [0,0,0,pageStats.group4.count],
      tooltip: { yDecimals: 0, ySuffix: 'ms' }
    },
    {
      type: 'pie',
      name: 'Percentages',
      data: [
        {
          name: pageStats.group1.name,
          y: pageStats.group1.percentage,
          color: '#A0B228'
        },
        {
          name: pageStats.group2.name,
          y: pageStats.group2.percentage,
          color: '#FFDD00'
        },
        {
          name: pageStats.group3.name,
          y: pageStats.group3.percentage,
          color: '#FF9D00'
        },
        {
          name: pageStats.group4.name,
          y: pageStats.group4.percentage,
          color: '#FF0000'
        }
      ],
      center: [470, 85],
      size: 100,
      showInLegend: false,
      dataLabels: { enabled: false }
    }
  ]
});

indicatorsChart.setTitle({
  text: '<span class="chart_title">Indicators</span>',
  useHTML: true
});

	    $('#container_exceptions').sortable('#container_exceptions');
    

  function shortenNameAndDisplayFullOnHover(name){
   if (name.length < 20)
       return name;
   else
     return "<span class='tooltipContent'>"+name+"</span>" + name.substr(0,8)+"..."+name.substr(name.length-8,name.length);
  }

function generateHtmlRow(request, level, index, parent, group) {
    if (request.name == 'Global Information')
        var url = 'index.html';
    else
        var url = request.pathFormatted + '.html';

    if (group)
        var expandButtonStyle = '';
    else
        var expandButtonStyle = ' hidden';

    if (request.stats.numberOfRequests.total != 0)
        var koPercent = (request.stats.numberOfRequests.ko * 100 / request.stats.numberOfRequests.total).toFixed(0) + '%';
    else
        var koPercent = '-'

    return '<tr id="' + request.pathFormatted + '" class="child-of-' + parent + '"> \
        <td class="total col-1"> \
            <span id="' + request.pathFormatted + '" style="margin-left: ' + (level * 10) + 'px;" class="expand-button' + expandButtonStyle + '">&nbsp;</span> \
            <a href="' + url +'" class="withTooltip">' + shortenNameAndDisplayFullOnHover(request.name) + '</a><span class="value" style="display:none;">' + index + '</span> \
        </td> \
        <td class="value total col-2">' + request.stats.numberOfRequests.total + '</td> \
        <td class="value ok col-3">' + request.stats.numberOfRequests.ok + '</td> \
        <td class="value ko col-4">' + request.stats.numberOfRequests.ko + '</td> \
        <td class="value ko col-5">' + koPercent + '</td> \
        <td class="value total col-6">' + request.stats.meanNumberOfRequestsPerSecond.total + '</td> \
        <td class="value total col-7">' + request.stats.minResponseTime.total + '</td> \
        <td class="value total col-8">' + request.stats.percentiles1.total + '</td> \
        <td class="value total col-9">' + request.stats.percentiles2.total + '</td> \
        <td class="value total col-10">' + request.stats.percentiles3.total + '</td> \
        <td class="value total col-11">' + request.stats.percentiles4.total + '</td> \
        <td class="value total col-12">' + request.stats.maxResponseTime.total + '</td> \
        <td class="value total col-13">' + request.stats.meanResponseTime.total + '</td> \
        <td class="value total col-14">' + request.stats.standardDeviation.total + '</td> \
        </tr>';
}

function generateHtmlRowsForGroup(group, level, index, parent) {
    var buffer = '';

    if (!parent)
        parent = 'ROOT';
    else {
        buffer += generateHtmlRow(group, level - 1, index, parent, true);
        index++;
        parent = group.pathFormatted;
    }

    $.each(group.contents, function(contentName, content) {
        if (content.type == 'GROUP') {
            var result = generateHtmlRowsForGroup(content, level + 1, index, parent);
            buffer += result.html;
            index = result.index;
        }
        else if (content.type == 'REQUEST') {
            buffer += generateHtmlRow(content, level, index, parent);
            index++;
        }
    });

    return { html: buffer, index: index };
}

$('#container_statistics_head tbody').append(generateHtmlRow(stats, 0, 0));

var lines = generateHtmlRowsForGroup(stats, 0, 0)
$('#container_statistics_body tbody').append(lines.html);

$('#container_statistics_head').sortable('#container_statistics_body');
$('.statistics').expandable();

if (lines.index < 30) {
    $('#statistics_title span').attr('style', 'display: none;');
    $('#statistics_title').attr('style', 'cursor: auto;')
}
else {
    $('#statistics_title').click(function(){
        $(this).toggleClass('title_collapsed').toggleClass('title_not_collapsed');
        $('#container_statistics_body').parent().toggleClass('scrollable').toggleClass('');
    });
}

	    $('#container_errors').sortable('#container_errors');
    
allUsersData.yAxis = 0;

var allUsersChart = new Highcharts.StockChart({
  chart: {
    renderTo: 'container_active_users',
    zoomType: 'x'
  },
  credits: { enabled: false },
  legend: {
    enabled: true,
    floating: true,
    align: 'right',
    verticalAlign: 'top',
    layout: 'vertical',
    borderWidth: 0,
    itemStyle: { fontWeight: "normal" }
  },
  title: { text: 'A title to let highcharts reserve the place for the title set later' },
  rangeSelector: {
    buttonSpacing: 0,
    buttonTheme: {
      fill: 'LightGrey',
      padding: 1,
      stroke: 'Black',
      'stroke-width': 0.25,
      style: {
        color: 'Black',
        fontWeight: 'bold',
      },
      states: {
        stroke: 'Black',
        'stroke-width': 0.25,
        hover: {
          fill: 'DarkGrey',
          style: { color: 'black' }
        },
        select: {
          fill: 'DarkOrange',
          style: { color: 'white' }
        }
      }
    },
    buttons : [
      {
        type : 'minute',
        count : 1,
        text : '1m'
      }, {
        type : 'minute',
        count : 10,
        text : '10m'
      }, {
        type : 'hour',
        count : 1,
        text : '1h'
      }, {
        type : 'all',
        count : 1,
        text : 'All'
      }
    ],
    selected : 3,
    inputEnabled : false
  },
  xAxis: {
    type: 'datetime',
    ordinal: false,
    maxZoom: 10000 // three days
  },
  yAxis: {
    title: { text: 'Number of Active Users' },
    opposite: false,
    min: 0
  },
  series: [
    {
color: '#4572A7',
name: 'AddAndFindPersons',
data: [
  [1517574853000,30],[1517574854000,30],[1517574855000,30],[1517574856000,30],[1517574857000,30],[1517574858000,30],[1517574859000,30],[1517574860000,30],[1517574861000,30],[1517574862000,30],[1517574863000,30],[1517574864000,30],[1517574865000,30],[1517574866000,30],[1517574867000,30],[1517574868000,30],[1517574869000,24],[1517574870000,1]
],
tooltip: { yDecimals: 0, ySuffix: '', valueDecimals: 0 }},

    allUsersData
  ]
});


allUsersChart.setTitle({
  text: '<span class="chart_title">Active Users along the Simulation</span>',
  useHTML: true
});

allUsersData.yAxis = 1;

var responseTimeDistributionChart = new Highcharts.Chart({
  chart: {
    renderTo: 'container_distrib',
    type: 'column'
  },
  credits: {
    enabled: false
  },
  legend: {
    enabled: true,
    floating: true,
    y: -285,
    borderWidth: 0,
    itemStyle: {
      fontWeight: "normal"
    }
  },
  title: {
    text: 'A title to let highcharts reserve the place for the title set later'
  },
  xAxis: {
    categories: ['7', '15', '24', '32', '40', '48', '57', '65', '73', '81', '90', '98', '106', '114', '122', '131', '139', '147', '155', '164', '172', '180', '188', '197', '205', '213', '221', '230', '238', '246', '254', '263', '271', '279', '287', '296', '304', '312', '320', '328', '337', '345', '353', '361', '370', '378', '386', '394', '403', '411', '419', '427', '436', '444', '452', '460', '469', '477', '485', '493', '502', '510', '518', '526', '534', '543', '551', '559', '567', '576', '584', '592', '600', '609', '617', '625', '633', '642', '650', '658', '666', '675', '683', '691', '699', '708', '716', '724', '732', '740', '749', '757', '765', '773', '782', '790', '798', '806', '815', '823'],
    tickInterval: 20
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Percentage of Requests'
    }
  },
  tooltip: {
    formatter: function() {
      return '<b>'+ this.x +' ms</b><br/>'+
      this.series.name +': '+ this.y +' %<br/>'+
      'Total: '+ this.point.stackTotal + ' %';
    }
  },
  plotOptions: {
    series: {
      groupPadding: 0,
      stacking: 'normal',
      shadow: true
    }
  },
  series: [
  	{
type: 'column',
color: '#4572A7',
name: 'OK',
data: [
  12.65,11.4,10.26,9.26,8.65,6.48,4.75,3.66,3.46,2.61,2.43,2.06,2.36,1.6,0.93,1.25,1.36,1.26,1.05,1.3,0.95,0.95,0.83,0.65,0.76,0.48,0.38,0.45,0.45,0.28,0.51,0.38,0.21,0.38,0.21,0.28,0.31,0.18,0.31,0.13,0.11,0.1,0.05,0.13,0.1,0.1,0.13,0.1,0.1,0.05,0.03,0.05,0.05,0.03,0.08,0.03,0.06,0.01,0.01,0.01,0.03,0.01,0.03,0.0,0.0,0.03,0.05,0.03,0.03,0.0,0.0,0.01,0.01,0.0,0.0,0.01,0.01,0.01,0.03,0.01,0.03,0.0,0.0,0.01,0.03,0.0,0.03,0.08,0.01,0.01,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.01
],
tooltip: { yDecimals: 0, ySuffix: 'ms' }
},
  	{
type: 'column',
color: '#FF0000',
name: 'KO',
data: [
  0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0
],
tooltip: { yDecimals: 0, ySuffix: 'ms' }
}
  ]
});

responseTimeDistributionChart.setTitle({
  text: '<span class="chart_title">Response Time Distribution</span>',
  useHTML: true
});

var responseTimePercentiles = unpack([[1517574853,[413,527,661,720,721,725,726,733,801,827]],[1517574854,[9,30,66,151,165,184,239,284,562,571]],[1517574855,[7,14,31,148,186,223,267,324,413,435]],[1517574856,[7,35,84,163,171,185,207,242,311,444]],[1517574857,[7,15,31,107,165,200,253,283,387,472]],[1517574858,[6,23,55,129,143,162,195,226,378,518]],[1517574859,[6,19,41,121,160,179,198,256,359,379]],[1517574860,[5,22,48,125,144,159,184,211,289,391]],[1517574861,[6,22,45,101,126,138,162,217,323,647]],[1517574862,[7,26,57,147,174,231,291,324,374,475]],[1517574863,[6,18,39,98,114,134,153,186,314,369]],[1517574864,[4,24,48,91,110,127,160,203,325,471]],[1517574865,[4,22,42,79,90,101,131,191,379,542]],[1517574866,[5,32,45,64,70,76,84,111,396,540]],[1517574867,[5,37,50,89,94,104,110,135,265,598]],[1517574868,[4,12,27,63,73,90,119,176,391,595]],[1517574869,[3,13,28,45,52,63,90,112,225,461]],[1517574870,[3,4,5,7,8,9,10,12,21,41]]]);

var responseTimeChart = new Highcharts.StockChart({
  chart: {
    renderTo: 'container',
    zoomType: 'x'
  },
  colors: ['#C4FD90', '#7FF77F', '#6FF2AD', '#60ECE5', '#51A8E7', '#4353E2', '#7335DC', '#BC28D7', '#D11C97', '#C73905', 'Orange'],
  credits: { enabled: false },
  legend: {
    enabled: true,
    floating: true,
    y: -65,
    borderWidth: 0,
    itemStyle: { fontWeight: "normal" }
  },
  title: { text: 'A title to let highcharts reserve the place for the title set later' },
  navigator: { baseSeries: 9 },
  rangeSelector: {
    rangeSelector: { align: "left" },
    buttonSpacing: 0,
    buttonTheme: {
      fill: 'LightGrey',
      padding: 1,
      stroke: 'Black',
      'stroke-width': 0.25,
      style: {
        color: 'Black',
        fontWeight: 'bold',
      },
      states: {
        stroke: 'Black',
        'stroke-width': 0.25,
        hover: {
          fill: 'DarkGrey',
          style: { color: 'black' }
        },
        select: {
          fill: 'DarkOrange',
          style: { color: 'white' }
        }
      }
    },
    buttons : [
      {
        type : 'minute',
        count : 1,
        text : '1m'
      }, {
        type : 'minute',
        count : 10,
        text : '10m'
      }, {
        type : 'hour',
        count : 1,
        text : '1h'
      }, {
        type : 'all',
        count : 1,
        text : 'All'
      }
    ],
    selected : 3,
    inputEnabled : false
  },
  xAxis: {
    type: 'datetime',
    ordinal: false,
    maxZoom: 10000 // three days
  },
  yAxis:[
    {
      min: 0,
      title: {
        text: 'Response Time (ms)',
        style: { color: '#4572A7' }
      },
      opposite: false
    }, {
      min: 0,
      title: {
        text: 'Active Users',
        style: { color: '#FF9D00' }
      },
      opposite: true
    }
  ],
  plotOptions: {
    arearange: { lineWidth: 1 },
    series: {
      dataGrouping: { enabled: false }
    }
  },
  series: [
  
    
         {
pointInterval: 1000,
name: 'min',
data: responseTimePercentiles[0],
tooltip: { yDecimals: 0, ySuffix: 'ms' },
type : 'area',
yAxis: 0,
zIndex: 10
},
         {
pointInterval: 1000,
name: '25%',
data: responseTimePercentiles[1],
tooltip: { yDecimals: 0, ySuffix: 'ms' },
type : 'area',
yAxis: 0,
zIndex: 9
},
         {
pointInterval: 1000,
name: '50%',
data: responseTimePercentiles[2],
tooltip: { yDecimals: 0, ySuffix: 'ms' },
type : 'area',
yAxis: 0,
zIndex: 8
},
         {
pointInterval: 1000,
name: '75%',
data: responseTimePercentiles[3],
tooltip: { yDecimals: 0, ySuffix: 'ms' },
type : 'area',
yAxis: 0,
zIndex: 7
},
         {
pointInterval: 1000,
name: '80%',
data: responseTimePercentiles[4],
tooltip: { yDecimals: 0, ySuffix: 'ms' },
type : 'area',
yAxis: 0,
zIndex: 6
},
         {
pointInterval: 1000,
name: '85%',
data: responseTimePercentiles[5],
tooltip: { yDecimals: 0, ySuffix: 'ms' },
type : 'area',
yAxis: 0,
zIndex: 5
},
         {
pointInterval: 1000,
name: '90%',
data: responseTimePercentiles[6],
tooltip: { yDecimals: 0, ySuffix: 'ms' },
type : 'area',
yAxis: 0,
zIndex: 4
},
         {
pointInterval: 1000,
name: '95%',
data: responseTimePercentiles[7],
tooltip: { yDecimals: 0, ySuffix: 'ms' },
type : 'area',
yAxis: 0,
zIndex: 3
},
         {
pointInterval: 1000,
name: '99%',
data: responseTimePercentiles[8],
tooltip: { yDecimals: 0, ySuffix: 'ms' },
type : 'area',
yAxis: 0,
zIndex: 2
},
         {
pointInterval: 1000,
name: 'max',
data: responseTimePercentiles[9],
tooltip: { yDecimals: 0, ySuffix: 'ms' },
type : 'area',
yAxis: 0,
zIndex: 1
},
  allUsersData
  ]
});

responseTimeChart.setTitle({
  text: '<span class="chart_title chart_title_">Response Time Percentiles over Time (OK)</span>',
  useHTML: true
});

var container_requests = unpack([[1517574853,[30,0, 30]],[1517574854,[190,0, 190]],[1517574855,[278,0, 278]],[1517574856,[275,0, 275]],[1517574857,[318,0, 318]],[1517574858,[332,0, 332]],[1517574859,[344,0, 344]],[1517574860,[335,0, 335]],[1517574861,[369,0, 369]],[1517574862,[275,0, 275]],[1517574863,[390,0, 390]],[1517574864,[399,0, 399]],[1517574865,[457,0, 457]],[1517574866,[487,0, 487]],[1517574867,[432,0, 432]],[1517574868,[543,0, 543]],[1517574869,[464,0, 464]],[1517574870,[82,0, 82]]]);

var requestsChart = new Highcharts.StockChart({
  chart: {
    renderTo: 'container_requests',
    zoomType: 'x'
  },
  credits: { enabled: false },
  legend: {
    enabled: true,
    floating: true,
    itemDistance: 10,
    y: -285,
    borderWidth: 0,
    itemStyle: { fontWeight: "normal" }
  },
  title: { text: 'A title to let highcharts reserve the place for the title set later' },
  rangeSelector: {
    buttonSpacing: 0,
    buttonTheme: {
      fill: 'LightGrey',
      padding: 1,
      stroke: 'Black',
      'stroke-width': 0.25,
      style: {
        color: 'Black',
        fontWeight: 'bold',
      },
      states: {
        stroke: 'Black',
        'stroke-width': 0.25,
        hover: {
          fill: 'DarkGrey',
          style: { color: 'black' }
         },
         select: {
          fill: 'DarkOrange',
          style: { color: 'white' }
        }
      }
    },
    buttons : [
      {
        type : 'minute',
        count : 1,
        text : '1m'
      }, {
        type : 'minute',
        count : 10,
        text : '10m'
      }, {
        type : 'hour',
        count : 1,
        text : '1h'
      }, {
        type : 'all',
        count : 1,
        text : 'All'
      }
    ],
    selected : 3,
    inputEnabled : false
  },
  plotOptions: {
    series: {
      dataGrouping: { enabled: false }
    },
    area: {
      stacking: 'normal'
    }
  },
  xAxis: {
    type: 'datetime',
    ordinal: false,
    maxZoom: 10000 // three days
  },
  yAxis:[
    {
      min: 0,
      title: {
        text: 'Number of requests',
        style: { color: '#4572A7' }
      },
      opposite: false
    }, {
      min: 0,
      title: {
        text: 'Active Users',
        style: { color: '#FF9D00' }
      },
      opposite: true
    }
  ],
  series: [
    {
color: '#4572A7',
name: 'All',
data: container_requests[0],
tooltip: { yDecimals: 0, ySuffix: '', valueDecimals: 0 }
,type: 'area'},
    allUsersData
  ]
});

requestsChart.setTitle({
  text: '<span class="chart_title">Number of requests per second</span>',
  useHTML: true
});

var container_responses = unpack([[1517574853,[0,0, 0]],[1517574854,[193,0, 193]],[1517574855,[278,0, 278]],[1517574856,[275,0, 275]],[1517574857,[323,0, 323]],[1517574858,[326,0, 326]],[1517574859,[344,0, 344]],[1517574860,[336,0, 336]],[1517574861,[369,0, 369]],[1517574862,[275,0, 275]],[1517574863,[396,0, 396]],[1517574864,[390,0, 390]],[1517574865,[458,0, 458]],[1517574866,[486,0, 486]],[1517574867,[433,0, 433]],[1517574868,[546,0, 546]],[1517574869,[486,0, 486]],[1517574870,[86,0, 86]]]);

var requestsChart = new Highcharts.StockChart({
  chart: {
    renderTo: 'container_responses',
    zoomType: 'x'
  },
  credits: { enabled: false },
  legend: {
    enabled: true,
    floating: true,
    itemDistance: 10,
    y: -285,
    borderWidth: 0,
    itemStyle: { fontWeight: "normal" }
  },
  title: { text: 'A title to let highcharts reserve the place for the title set later' },
  rangeSelector: {
    buttonSpacing: 0,
    buttonTheme: {
      fill: 'LightGrey',
      padding: 1,
      stroke: 'Black',
      'stroke-width': 0.25,
      style: {
        color: 'Black',
        fontWeight: 'bold',
      },
      states: {
        stroke: 'Black',
        'stroke-width': 0.25,
        hover: {
          fill: 'DarkGrey',
          style: { color: 'black' }
         },
         select: {
          fill: 'DarkOrange',
          style: { color: 'white' }
        }
      }
    },
    buttons : [
      {
        type : 'minute',
        count : 1,
        text : '1m'
      }, {
        type : 'minute',
        count : 10,
        text : '10m'
      }, {
        type : 'hour',
        count : 1,
        text : '1h'
      }, {
        type : 'all',
        count : 1,
        text : 'All'
      }
    ],
    selected : 3,
    inputEnabled : false
  },
  plotOptions: {
    series: {
      dataGrouping: { enabled: false }
    },
    area: {
      stacking: 'normal'
    }
  },
  xAxis: {
    type: 'datetime',
    ordinal: false,
    maxZoom: 10000 // three days
  },
  yAxis:[
    {
      min: 0,
      title: {
        text: 'Number of responses',
        style: { color: '#4572A7' }
      },
      opposite: false
    }, {
      min: 0,
      title: {
        text: 'Active Users',
        style: { color: '#FF9D00' }
      },
      opposite: true
    }
  ],
  series: [
    {
color: '#4572A7',
name: 'All',
data: container_responses[0],
tooltip: { yDecimals: 0, ySuffix: '', valueDecimals: 0 }
},
{
color: '#FF0000',
name: 'KO',
data: container_responses[1],
tooltip: { yDecimals: 0, ySuffix: '', valueDecimals: 0 }
,type: 'area'},
{
color: '#A0B228',
name: 'OK',
data: container_responses[2],
tooltip: { yDecimals: 0, ySuffix: '', valueDecimals: 0 }
,type: 'area'},
    allUsersData,
{
  
type: 'pie',
name: 'Distribution',
data: [
  {name: 'OK', y: 6000.0, color: '#A0B228'},{name: 'KO', y: 0.0, color: '#FF0000'}
],
center: [775, -40],
size: 70,
showInLegend: false,
dataLabels: { enabled: false },
dataGrouping: { enabled: false }

}

  ]
});

requestsChart.setTitle({
  text: '<span class="chart_title">Number of responses per second</span>',
  useHTML: true
});

    });
</script>
</body>
</html>
